<template>
	<view class="e-p-l-20 e-p-r-20">
		<view class="nearby-goods-time-card bg-white  e-flex " @tap="handleShow">
			<view class="e-flex-1 e-flex">
				<text class="e-p-r-40">{{$t('classify.次卡')}}</text>
				<view class="e-flex-1 e-flex">
					<view class="nearby-goods-time-card__icon e-m-r-20 bg-primary e-flex-xy-center">
						<text class="c-white">{{$t('classify.卡')}}</text>
					</view>
					<view class="e-flex-1 ">
						<text class="e-line-1">{{info.headline}}</text>
					</view>
				</view>
			</view>
			<image src="/pages/systemPay/static/nearby/arrow.png" class="img-36 e-m-l-20"></image>
		</view>
		<e-popup :show="show" mode="bottom" @close="show = false">
			<view class="nearby-goods-time-card-popup">
				<view class="e-flex-xy-center e-p-t-26 e-p-b-30 e-rela">
					<text class="e-font-32 fw-500">{{$t('classify.选择次卡')}}</text>
					<image class="nearby-goods-time-card-popup__close img-30 e-abso"
						:src="$staticPath('classify/close.png')" @tap.stop="show = false"></image>
				</view>
				<view class="e-p-l-20 e-p-r-20">
					<scroll-view class="nearby-goods-time-card-popup__scroll" scroll-y="true">
						<view class="nearby-goods-time-card-popup__item e-m-b-30" v-for="(item,index) in list"
							:key="item.id" @tap="handleSelectCard(item)">
							<view class="nearby-goods-time-card-popup__item-body c-white"
								:style="[item.colorType === '3' ? {backgroundImage: `url(${$fullLink(item.backgroundUrl)})` }:{backgroundColor:item.colorType === '2' ? `rgba(${item.background})` :item.background }]">
								<view class="e-flex e-m-b-18">
									<image class="img-24 e-m-r-18" :src="$fullLink(storeInfo.logo)" mode=""></image>
									<text>{{storeInfo.name}}</text>
								</view>
								<view class=" e-line-1">
									<text class="e-font-32 fw-600">{{item.headline}}</text>
								</view>
								<view class="nearby-goods-time-card-popup__item-body__bottom e-flex e-flex-between">
									<view class="e-font-32">
										<text>{{$unitEn}}</text>
										<text
											class="nearby-goods-time-card-popup__item-body__bottom-price">{{item.price}}</text>
										<text>/{{item.exchangeSize}}{{$t('classify.次')}}</text>
									</view>
									<view class="e-font-26">
										<view class="e-m-b-8">
											<text v-if="item.isEffective === 1">{{$t('classify.永久有效')}}</text>
											<text
												v-else>{{timeFormat(item.effectiveTime, 'yyyy.mm.dd')}}{{$t('classify.前有效')}}</text>
										</view>
										<view v-if="item.isRf === 1">
											<text>{{$t('classify.timeCardTips2').replace('-NUMBER1-', item.limitDays).replace('-NUMBER2-', item.limitNumber)}}</text>
										</view>
									</view>
								</view>
							</view>
							<view class="e-p-t-26 e-p-b-26 e-p-r-32 e-p-l-32 e-flex">
								<view class="e-flex-1 e-m-r-20 e-font-24">
									<text class="c-secondary">{{getTxt(item,1)}}</text>
									<text class="c-primary">{{getTxt(item,2)}}</text>
								</view>
								<radio :color="AppSkin.primary" :checked="cardInfo?.id === item.id"
									@tap.stop="handleSelectCard(item)" />
							</view>
						</view>
					</scroll-view>

				</view>
				<view class="nearby-goods-time-card-popup__bottom e-flex e-flex-between">
					<view class="e-font-32 c-primary">
						<template v-if="cardInfo?.id">
							<text>{{$unitEn}}</text>
							<text class="e-font-48">{{cardInfo.price}}</text>
							<text>/{{cardInfo.exchangeSize}}{{$t('classify.次')}}</text>
						</template>
					</view>
					<view class="">
						<e-button style="min-width: 216rpx;" type="primary" :disabled="!cardInfo?.id" shape="circle"
							:text="$t('classify.立即购买')" @click="handleShowPay"></e-button>
					</view>
				</view>
			</view>
		</e-popup>
		<pay-popup ref="payPopup" storeType="2" :payMoney="cardInfo?.price" v-model:show="payShow" @close="payShow = false" @pay="pay">
		</pay-popup>
		<card-valid-code-popup :show="cardValidCodePopupShow" :payMoney="cardInfo?.price" @cancel="handleCancelCardPay" @confirm="handleCardPay"></card-valid-code-popup>
	</view>
</template>
<script lang="ts">
	export default {
		// #ifdef MP-WEIXIN
		// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，能更好的使用e-flex属性
		options: {
			virtualHost: true
		}
		// #endif
	}
</script>
<script setup lang="ts">
	import { ref, computed } from 'vue'
	import {
		throttle,
		accDiv,
		accAdd,
		accMul,
		numToFixed,
		timeFormat
	} from '@/common/utils'
	import {
		postPurchaseTimeCard,
		getPayResult
	} from '@/common/request/api'
	import CardValidCodePopup from '../../../child/cardValidCodePopup.vue'
	import type { GoodsTimeCardItem, NearbyStoreInfo } from '@/common/request/api'
	import { usePay } from '../../../hooks/usePay'
	import type { UniGlobalData } from '@/typings/uni'
	import { PayType } from '@/env'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import {
		useInit
	} from '@/common/stores';
	import { storeToRefs } from 'pinia'

	const props = defineProps<{
		list : GoodsTimeCardItem[]
		price?: string | number
		storeInfo : NearbyStoreInfo
	}>()

	const ctx = useCurrentInstance()

	const { AppSkin } = storeToRefs(useInit())
	const {
		systemPay,
		getH5PayResult,checkCardPay,handleCardPay,
		handleCancelCardPay,cardValidCodePopupShow } = usePay()

	const show = ref(false)
	const cardInfo = ref<GoodsTimeCardItem | undefined>(undefined)
	const payShow = ref(false)

	const info = computed(() => props.list[0])


	const handleShow = () => {
		show.value = true
	}



	const getTxt = (data : GoodsTimeCardItem, type : number) => {
		const str = ctx.$t('classify.timeCardTips1')
		let index = str.indexOf('-PRICE2-')
		const price = numToFixed(accDiv(data.price, data.exchangeSize), 2)
		if (type === 1) {
			return str.slice(0, index).replace('-PRICE1-', `${ctx.$unitEn}${price}`)
		}
		const onePrice = numToFixed(accAdd(props.price, -price), 2)
		return str.slice(index + 8, str.length).replace('-PRICE3-', `${ctx.$unitEn}${onePrice}`).replace(
			'-PRICE4-', `${ctx.$unitEn}${accMul(onePrice, data.exchangeSize)}`)
	}
	const handleSelectCard = (data : GoodsTimeCardItem) => {
		if (cardInfo.value?.id === data.id) {
			cardInfo.value = undefined
			return
		}
		cardInfo.value = data
	}
	const handleShowPay = () => {
		show.value = false
		payShow.value = true
	}
	const pay = throttle(async function (payId : number, payword : string | undefined = undefined, payType : PayType,payName:string, payisDefault:string,bankId?:number) {
		let params = {
			payId,
			fromType: getApp<UniGlobalData>().globalData?.payFromType,
			cardId: cardInfo.value?.id!,
			payword,
			bankId
		}
		payShow.value = false
		if(!bankId&&checkCardPay(payType,(cardId:number) => {
			pay(payId,payword, payType,payName,payisDefault,cardId)
		})){
			return 
		}
		uni.hideLoading();
		const res = await postPurchaseTimeCard(params)
		await systemPay({
			payType,
			resolveData: res,
			payParams: res.data,
			api: getPayResult,
			storageKey: 'payTimeCardOrderId',
			orderIdKey: 'paycode',
			payMoney:cardInfo.value?.price,
			callBack: () => {
				ctx.$toastApp(res.msg)
			}
		})
	}, 1500)


	getH5PayResult('', 'payTimeCardOrderId', getPayResult)
</script>

<style lang="scss" scoped>
	.nearby-goods-time-card {
		border-radius: 20rpx;
		padding: 30rpx 18rpx 30rpx 30rpx;
		overflow: hidden;

		&__icon {
			min-width: 40rpx;
			height: 40rpx;
			padding: 0 8rpx;
			font-size: 24rpx;
			font-weight: 500;
			border-radius: 4rpx;

		}
	}

	.nearby-goods-time-card-popup {
		&__close {
			top: 36rpx;
			right: 30rpx;
		}

		&__scroll {
			height: 920rpx;
		}

		&__item {
			border-radius: 20rpx;
			background: #F2F2F2;
			overflow: hidden;

			&-body {
				background-size: 100% 100%;
				background-repeat: no-repeat;
				height: 369rpx;
				border-radius: 20rpx;
				padding: 28rpx 30rpx 18rpx 30rpx;
				overflow: hidden;

				&__bottom {
					padding-top: 102rpx;

					&-price {
						font-size: 80rpx;
					}
				}
			}
		}

		&__bottom {
			height: 112rpx;
			padding: 0 20rpx;
			box-shadow: inset 0rpx 1rpx 0rpx 0rpx #F2F2F2;
		}
	}
</style>